$(function(){
    getList()

    // 添加
    $('#from').on('submit',function(e){
        e.preventDefault();
        var id = $('#id').val()
        var name = $('#name').val()       
        if(flag){
            $.ajax({
                url: 'books/'+id,
                type: 'put',
                data: {name:name},
                success: function (res) {
                    getList()
                    $('#id').val('')
                    $('#name').val('')  
                }
            })
            return
        }

        $.ajax({
            url: 'books/book/' + name,
            success: function (res) {
                console.log(res);
                
                if (res.status === 1) return alert('图书名称已经存在')
                $.ajax({
                    url: 'books',
                    type: 'post',
                    data: { name: name },
                    success: function (res) {
                        getList()
                        $('#id').val('')
                        $('#name').val('')  
                    }
                })  
            }
        }) 
        
        
    })

    // 删除
    $('body').on('click', '#del', function () {
        var id = $(this).data('id')
        $.ajax({
            url: 'books/' + id,
            type: 'delete',
            success: function (res) {
                getList()              
            }
        }) 
    })

    // 修改
    $('body').on('click', '#bianji', function () {
        flag=true
        
        $('#id').val($(this).data('id'))
        $('#name').val($(this).data('name'))
        
    })

})

var flag=null;
// 页面渲染
function getList() {
    $.ajax({
        url: 'books',
        success: function(res){
            var num = res.length
            $('#bookNum').html(num)
            var arr = [];
            for (var i = 0; i < res.length; i++) {
                var item = `<tr>
            <td>${res[i].id}</td>
            <td>${res[i].name}</td>
            <td>${res[i].date}</td>
            <td>
            <a href="javascript:;" data-id="${res[i].id}" data-name="${res[i].name}"  data-date="${res[i].date}" id="bianji">修改</a>
            <a href="javascript:;" data-id="${res[i].id}" id="del">删除</a>
            </td>
        </tr>`;
                arr.push(item);
            }
            // console.log(arr, 66655588999954)
            var resultStr = arr.join('');
            // console.log(resultStr);
            $('tbody').html(resultStr);
        }
    })
}